<h2>Управление Фотогалереей</h2><br/>
<div class="tabulation" data-id="tabs-1">
	<a class="element active" data-id="tab-1">Основное</a>
	<a class="element" data-id="tab-2">Изображение</a>
</div>
<div class="scrollable">
	<form action="<?= CHtml::normalizeUrl(array('catalog/SaveGallery', 'id'=> isset($item)?$item->id:'new'))?>" method="POST">
		<div class="tabs" id="tabs-1">
			<div class="tab active" id="tab-1">
				<ul class="switch-box">
					<li>
						<div><strong>Видимость:</strong> </div>
						<div>
							<select class="switch" name="item[isVisible]">
								<option value="0" <?= isset($item)?($item->isVisible == "0")?" selected":"":'' ?>>1</option>
								<option value="1" <?= isset($item)?($item->isVisible == "1")?" selected":"":'selected' ?>>0</option>
							</select>
						</div>
					</li>
				</ul>
				<table class="step-right">
					<tbody>
					<tr>
						<td><strong>Название:</strong></td>
						<td><input class="input wide" name="item[title]" type="text" id="name" value="<?=isset($item)?$item->title:''?>"></td>
						<td></td>
					</tr>
					<tr>
						<td><strong>Дата:</strong></td>
						<td><input class="tcal input" name="item[date]" type="date" required id="date" value='<?=isset($item)?$item->date:''?>'></td>
						<td></td>
					</tr>
					<tr>
						<td><strong>Описание:</strong></td>
						<td></td>
					</tr>
					<tr>
						<td colspan="3">
							<textarea name="item[body]" class="input wide"><?=isset($item)?$item->body:''?></textarea>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="tab" id="tab-2">
				<div class="step-right">

						<strong>Изображения:</strong>
						<div class="images images-sortable">
							<? if( isset($item) ): ?>
							<? foreach($item->galleryImgs as $img): ?>
								<div style="display: inline-block">
									<input class="gallery tcal input" type="text" name="images[<?=$img->id?>][title]" placeholder="Название фото" value="<?=$img->title?>" data-id="<?= $img->id ?>">
									<input type="hidden" name="edit_img[<?= $img->id ?>]" value="" id="edit-<?= $img->id ?>">
									<input type="hidden" name="images[<?= $img->id ?>][img]" value="<?= $img->img ?>">
									<input type="hidden" name="new[<?= $img->id ?>]" value="">
									<div class="image" style="display:block;">
										<div class="icon100"><img src="<?= $this->baseUrl . $img->img ?>" class="round100">
										</div>
										<div class="image-remove">
											<a class="btn-red delete-image" data-id="<?= $img->id ?>">Удалить</a>
										</div>
									</div>
								</div>
							<? endforeach; ?>
							<? endif ?>
							<input type="hidden" name="is_deleted" value="" id="is_deleted">
						</div>


					<h4>Добавить изображения:</h4>
					<div class="image-drop dropzone"></div>
<!--					<input class="input" name="item[img]" type="hidden" id="img" value="--><?//=isset($item->img)?$this->baseUrl . $item->img :''?><!--">-->
					<input class="input" name="imgs" type="hidden" id="imgs" required>
					<input class="input" name="img" type="hidden" id="img" required>
				</div>
			</div>
			<input type="submit" class="btn-green save-btn" value="Сохранить"/>
		</div>
	</form>
</div>
<script type="text/javascript">
	$(function(){
		$('.popup').on('change', '.gallery', function() {
			$('#edit-'+$(this).data('id')).val(1);
		});
		var editor;
		editor = CKEDITOR.replace( 'item[body]',
			{
				filebrowserBrowseUrl :'/instinct/js/ckeditor/filemanager/browser/default/browser.html?Connector=/instinct/js/ckeditor/filemanager/connectors/php/connector.php',
				filebrowserImageBrowseUrl : '/instinct/js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=/instinct/js/ckeditor/filemanager/connectors/php/connector.php',
				filebrowserFlashBrowseUrl :'/instinct/js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=/instinct/js/ckeditor/filemanager/connectors/php/connector.php',
				filebrowserUploadUrl  :'/instinct/js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
				filebrowserImageUploadUrl : '/instinct/js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
				filebrowserFlashUploadUrl : '/instinct/js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash',
				width: '90%'
			});


		$('.popup-outer').click(function() {
			for(name in CKEDITOR.instances)
			{
				CKEDITOR.instances[name].destroy()
			}

		});
		$('.tabulation .element').click(function() {
			$('.tabulation .element').removeClass('active');
			$(this).addClass('active');
			$('#' + $(this).parent().data('id') + ' > .tab').hide();
			$('#' + $(this).data('id')).show();

		});
		var num = 0;
		var switchID = 0;
		$('.switch').each(function() {
			$(this).attr('data-id', switchID);
			temp = "";
			leftSpace = "";
			if ($(this).val() == 1) {
				temp = " true";
				leftSpace = "style='left: 1em;'"
			}
			$(this).after("<div class='switcher"+temp+"' data-id='"+switchID+"' data-state='1'><div class='toggle' "+leftSpace+"></div></div>");
			$(this).hide();
			switchID++;
		});
		$('.switcher').click(function() {
			$(this).toggleClass('true');
			if($(this).hasClass('true')) {
				$('.toggle', $(this)).animate({'left' : '1em'}, 200);
				$('.switch[data-id="'+$(this).data('id')+'"]').val(1);
			} else {
				$('.toggle', $(this)).animate({'left': '0em'}, 200);
				$('.switch[data-id="'+$(this).data('id')+'"]').val(0);
			}
		});
	});
	$('.popup').on('click', '.delete-image', function() {
		var del_img=$('#is_deleted');
		if (del_img.val()) {
			del_img.val(del_img.val() + ',' + $(this).data('id'));
		} else {
			del_img.val($(this).data('id'));
		}

		$(this).parent().parent().parent().fadeOut(400);
	});
	var newFileNames = {};
	var all_img=$('#imgs');
	var one_img = $('#img');
	var new_img=1;
	$('div.image-drop').dropzone({
		url: '<?=CHtml::normalizeUrl(array('function/uploadIcons', 'f'=>'gallery'))?>',
		addRemoveLinks: false,
		//previewsContainer:'.images',
//		maxFiles: 1,
		uploadMultiple : true,
		success: function(data, response) {
			var json = JSON.parse(response);
			one_img.val(json[data.name]);
			all_img.val(all_img.val() + ',' + json[data.name]);
			newFileNames[data.name] = json[data.name];
			var html_img='<div style="display: inline-block">'+
				'<input class="tcal input" type="text" name="images[new'+new_img+'][title]" placeholder="Название фото" value="">'+
				'<input type="hidden" name="images[new'+new_img+'][img]" value="'+ json[data.name]+'">'+
				'<input type="hidden" name="new[new'+new_img+']" value="1">'+
				'<div class="image" style="display:block;">'+
				'<div class="icon100"><img src="'+ json[data.name]+'" class="round100">'+
				'</div>'+
			'<div class="image-remove">'+
				'<a class="btn-red delete-image" data-id="new'+new_img+'">Удалить</a>'+
			'</div>'+
			'</div>'+
			'</div>';
			new_img++;
			$('.images').append(html_img);
		},
		maxFilesize : 3,
		init: function() {
			var dz = this;
			this.on('removedfile', function(data) {
				$.ajax({
					url:'<?=CHtml::normalizeUrl(array('function/DeletedImage'))?>',
					type:'GET',
					data:{img:newFileNames[data.name]},
					success: function () {
						humane.log('Изображение успешно удалено');
					},
					error:function(){
						humane.log('Ошибка');
					}
				});
				delete newFileNames[data.name];

				all_img.val('');
				var f = one_img.val();
				for (var key in newFileNames) {
					all_img.val(all_img.val() + ',' + newFileNames[key]);
					one_img.val(newFileNames[key]);
				}
				if (f == one_img.val()) one_img.val('');
			});
		}
	});
</script>
